<template>
  <div>
    <p>watch and computed</p>

    <p>Full Name: {{ fullName }}</p>
    <input v-model="fullName" />

    <el-button type="primary" @click="stopWatching">stopWatching</el-button>
  </div>
</template>

<script setup lang="ts">
import { computed, ref, watch } from "vue";

const firstName = ref("John");

const fullName = computed({
  get() {
    return firstName.value;
  },
  set(newValue) {
    console.log("newValue", newValue);

    firstName.value = newValue;
  },
});

watch(
  fullName,
  (newValue, oldValue) => {
    console.log(`fullName from ${oldValue} to ${newValue}`);
  },
  { deep: true, immediate: true }
);

const stopWatching = watch(fullName, (newValue, oldValue) => {
  console.log(
    `还没暂停 点击stopWatching暂停watch-------- from ${oldValue} to ${newValue}`
  );
});
</script>
